<template>
  <div class="onepage">
    <div class="searchbox">
      <a-card :bordered="false" style="border-radius:4px">
        <div class="header_box flex  row_center">
          <a-input placeholder="输入商品id进行查询" v-model="search" style="max-width:241px;margin-right:15px;" />
          <a-button style="width:80px;color:#101010;" @click="docheck">查 询</a-button>
        </div>
      </a-card>
      <div v-if="ischeck">
        <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
          <div class="boxinfo">
            <a-row :gutter="[10, 10]">
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="infobox ">
                  <div class="line-1">商品标题：{{ goodsinfo.itemtitle }}</div>
                  <div class="line-1">商品店铺：{{ goodsinfo.shopname }}</div>
                </div>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="infobox">
                  <div>当前券后价：{{ goodsinfo.price }}</div>
                  <div>商品月销量：{{ goodsinfo.num }}</div>
                </div>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <div class="infobox" style="font-size: 14px;">
                  <div>
                    <!-- <span class="p_r_10">好单库：{{ goodsinfo. }}</span> -->
                    <span>实惠猪：{{ goodsinfo.shz_status == 1 ? '离线' : '在线' }}</span>
                  </div>
                  <div>
                    <span class="p_r_10">大淘客：{{ goodsinfo.dtk_status == 1 ? '离线' : '在线' }}</span>
                    <span>选单网：{{ goodsinfo.xdw_status == 1 ? '离线' : '在线' }}</span>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-card>
        <a-row :gutter="[10, 10]">
          <a-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                平台在线记录
              </div>
              <div class="platbox flex row_bet">
                <div style="width:100px">日期</div>
                <div class="line-1">大淘客</div>
                <div class="line-1">好单库</div>
                <div class="line-1">实惠猪</div>
                <div class="line-1">选单网</div>
              </div>
              <div class="platbot" @scroll="Scroll">
                <div class="platbox flex row_bet" v-for="(item, index) in platformList" :key="index">
                  <div style="width:100px">{{ item.create_at | dateFormat('YYYY-MM-DD') }}</div>
                  <div class="line-1" :style="{ color: item.dtk_status == 1 ? '#FF2525' : '#101010' }">
                    {{ item.dtk_status == 1 ? '离线' : '在线' }}
                  </div>
                  <div class="line-1">
                    <!-- {{ item.hdk == 1 ? '离线' : '在线' }} -->
                    暂无
                  </div>
                  <div class="line-1" :style="{ color: item.shz_status == 1 ? '#FF2525' : '#101010' }">
                    {{ item.shz_status == 1 ? '离线' : '在线' }}
                  </div>
                  <div class="line-1" :style="{ color: item.xdw_status == 1 ? '#FF2525' : '#101010' }">
                    {{ item.xdw_status == 1 ? '离线' : '在线' }}
                  </div>
                </div>
                <a-divider> <a-icon :type="isloading" /> {{ loadingtext }}</a-divider>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                采集群传播记录
              </div>
              <div class="platbox flex row_bet">
                <div style="width:100px">日期</div>
                <div class="line-1">采集群数量</div>
                <div class="line-1">销量</div>
              </div>
              <div class="collapsebox">
                <a-collapse :bordered="false" @change="collapsechange" :accordion="true">
                  <a-collapse-panel
                    v-for="(item, index) in spreadList"
                    :key="index"
                    :style="customStyle"
                    :showArrow="false"
                  >
                    <div slot="header" class="flex row_bet">
                      <span>{{ item.create_at | dateFormat('YYYY-MM-DD') }}</span>
                      <span style="min-width:40px">{{ item.today_union_num }}</span>
                      <span>{{ item.today_num }}</span>
                    </div>
                    <div style="border-radius:8px;border:1px solid gray;padding:5px;" v-if="item.getlist.length > 0">
                      <div v-for="(item2, index2) in item.getlist" :key="item2.create_at">
                        <span class="p_l_10 p_r_10">{{ index2 + 1 }} {{ item2.gname }}</span>
                        {{ item2.sendtime | dateFormat('YYYY-MM-DD') }}
                      </div>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                百期推广概况
              </div>
              <div class="platbox flex row_bet">
                <div style="width:100px">日期</div>
                <div class="line-1" style="margin-left: 66px;">价格描述</div>
                <div class="line-1" style="margin-left: 193px;">当日销量</div>
                <div class="line-1" style="float: right;margin-left: auto;">当日佣金</div>
              </div>
              <div class="collapsebox">
                <div class="platbox flex row_bet" v-for="(item, index) in promotionList" :key="index">
                  <div style="width:100px">{{ item.time }}</div>
                  <div class="line-1" style="width:200px;text-align:center" :title="item.price">
                    {{ item.price == '' ? '无' : item.price }}
                  </div>
                  <div class="line-1" style="width:60px;text-align:center">
                    {{ item.num == '' ? '无' : item.num }}
                  </div>
                  <div class="line-1">{{ item.commission }}</div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="[10, 10]">
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                商品券后价走势
              </div>
              <div>
                <v-chart :forceFit="true" :height="height" :data="data2" :scale="scale2">
                  <v-tooltip />
                  <v-axis />
                  <v-line position="year*value" />
                  <v-point position="year*value" shape="circle" />
                </v-chart>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                商品销量走势
              </div>
              <div>
                <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
                  <v-tooltip />
                  <v-axis />
                  <v-line position="year*value" />
                  <v-point position="year*value" shape="circle" />
                </v-chart>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="[10, 10]">
          <a-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                淘宝pc排名
              </div>
              <div>
                <a-tabs @change="callback1" :tabBarGutter="10">
                  <a-tab-pane :tab="item.time" v-for="item in tbpcList" :key="item.temp"> </a-tab-pane>
                </a-tabs>
                <div class="ranklist">
                  <div class="flex row_bet" v-for="(v, k) in rankslist1" :key="k">
                    <span>{{ v.keyword }}</span>
                    <span
                    >第<span style="color:red">{{ v.page }}</span
                    >页 第<span style="color:red">{{ v.pos }}</span
                    >位</span
                    >
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                PC直通车排名
              </div>
              <div>
                <a-tabs @change="callback2" :tabBarGutter="10">
                  <a-tab-pane :tab="item.time" v-for="item in tbpcList" :key="item.temp"> </a-tab-pane>
                </a-tabs>
                <div class="ranklist">
                  <div class="flex row_bet" v-for="(v, k) in rankslist2" :key="k">
                    <span>{{ v.keyword }}</span>
                    <span
                    >第<span style="color:red">{{ v.page }}</span
                    >页 第<span style="color:red">{{ v.pos }}</span
                    >位</span
                    >
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                淘宝无线排名
              </div>
              <div>
                <a-tabs @change="callback3" :tabBarGutter="10">
                  <a-tab-pane :tab="item.time" v-for="item in tbpcList" :key="item.temp"> </a-tab-pane>
                </a-tabs>
                <div class="ranklist">
                  <div class="flex row_bet" v-for="(v, k) in rankslist3" :key="k">
                    <span>{{ v.keyword }}</span>
                    <span
                    >第<span style="color:red">{{ v.page }}</span
                    >页 第<span style="color:red">{{ v.pos }}</span
                    >位</span
                    >
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
            <a-card :bordered="false" class="goodsinfo" style="border-radius:4px;margin-top:10px;">
              <div class="card_title">
                无线直通车排名
              </div>
              <div>
                <a-tabs @change="callback4" :tabBarGutter="10">
                  <a-tab-pane :tab="item.time" v-for="item in tbpcList" :key="item.temp"> </a-tab-pane>
                </a-tabs>
                <div class="ranklist">
                  <div class="flex row_bet" v-for="(v, k) in rankslist4" :key="k">
                    <span>{{ v.keyword }}</span>
                    <span
                    >第<span style="color:red">{{ v.page }}</span
                    >页 第<span style="color:red">{{ v.pos }}</span
                    >位</span
                    >
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {
  getgoodshistory,
  getgoodslist,
  getunioninfo,
  getbetweendata,
  gethistoryprice,
  gethistorynum,
  getline,
  gettkeasy
} from '@/api/historyApi'
import moment from 'moment'
export default {
  name: 'Onepage',
  data () {
    return {
      moment,
      data: [],
      scale: [
        {
          dataKey: 'value',
          min: 0
        },
        {
          dataKey: 'year'
        }
      ],
      data2: [],
      scale2: [
        {
          dataKey: 'value',
          min: 0
        },
        {
          dataKey: 'year'
        }
      ],
      isloading: 'loading',
      loadingtext: '加载中...',
      ischeck: false,
      mode: 'top',
      customStyle: 'background: #ffffff;border-radius: 4px;border: 0;overflow: hidden',
      spreadList: [
        {
          create_at: '2020-11-03 11:20:11',
          today_union_num: 5454,
          today_num: 45454,
          getlist: [
            {
              gname: '黑马会',
              sendtime: '2020-10-20 16:20:21'
            },
            {
              gname: '小小团队',
              sendtime: '2020-10-20 16:20:21'
            },
            {
              gname: '黑马会',
              sendtime: '2020-10-20 16:20:21'
            }
          ]
        }
      ],
      search: '', // 576949867113
      // 平台在线记录
      platformList: [
        // {
        //   create_at: '2020-11-12',
        //   dtk_status: 1,
        //   hdk: null,
        //   shz_status: 2,
        //   xdw_status: 2
        // },
      ],
      // 采集群传播记录
      spread: [],
      // 百期推广概况
      promotionList: [
        // {
        //   time: '2020-11-05',
        //   price: '呀吼',
        //   num: 22222,
        //   commission: 20
        // }
      ],
      // 淘宝pc排名
      tbpcList: [],
      rankslist1: [],
      rankslist2: [],
      rankslist3: [],
      rankslist4: [],
      height: 266,
      style: {
        stroke: '#fff',
        lineWidth: 1
      },
      goodsinfo: {},
      num: 1,
      flag: false,
      openkey: '',
      shopid: ''
    }
  },

  computed: {},
  created () {
    for (let i = 0; i < 7; i++) {
      let da = this.getDate(new Date(), -(i + 1))
      let danum = new Date(da).getTime(da) + ''
      da = da.substring(da.length - 5, da.length)
      danum = danum.substring(0, danum.length - 3)
      // console.log('danum', danum)
      // console.log('da', da)
      const obj = {
        time: da,
        temp: danum
      }
      this.tbpcList.push(obj)
      // $this.temp = danum.substring(0, danum.length - 3)
    }
  },
  mounted () {},
  methods: {
    // 百期
    gettkeasy () {
      var that = this
      const url =
        'https://acs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?&data=%7B%22itemNumId%22%3A%22' +
        this.search +
        '%22%7D&qq-pf-to=pcqq.group'
      $.ajax({
        url: url,
        dataType: 'jsonp', // 指定服务器返回的数据类型
        success: function (res) {
          console.log(res.data)
          that.shopid = res.data.seller.shopId
          //  res.data.seller.shopId;
          gettkeasy({
            item_id: that.search,
            sellerid: that.shopid
          })
            .then(res => {
              console.log('百期返回', res)
              that.promotionList = res.data
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },

    // 底部F4
    getline (type, temp) {
      getline({
        itemId: this.search,
        p: type, // tb 淘宝pc p4p_tb pc直通车 app_tb 无线   p4p_app_tb 无线直通车
        t: temp
      })
        .then(res => {
          // console.log('f4返回', res)
          if (type === 'tb') {
            this.rankslist1 = res.result.data
          }
          if (type === 'p4p_tb') {
            this.rankslist2 = res.result.data
          }
          if (type === 'h5') {
            this.rankslist3 = res.result.data
          }
          if (type === 'p4p_h5') {
            this.rankslist4 = res.result.data
          }
          // console.log('type', type)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDate (date, day) {
      var dd = new Date(date)
      dd.setDate(dd.getDate() + day)
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1
      var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
      return y + '-' + m + '-' + d
    },
    // 数组提取
    getArrayKey (array, key) {
      var resc = []
      if (array) {
        array.forEach(function (t) {
          resc.push(t[key])
        })
      }
      // 使用: this.getArrayKey(array, "key");
      return resc
    },
    // 商品销量历史接口
    gethistorynum (start, end) {
      gethistorynum({
        item_id: this.search,
        start: start,
        end: end
      })
        .then(res => {
          if (res.code === 200) {
            console.log('商品销量历史返回', res)
            for (let i = 0; i < res.data.length; i++) {
              var obj2 = {
                year: moment(res.data[i].create_at).format('YYYY-MM-DD'),
                value: parseFloat(res.data[i].today_num)
              }
              // console.log(obj)
              this.data.push(obj2)
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 商品券后价历史接口
    gethistoryprice (start, end) {
      gethistoryprice({
        item_id: this.search,
        start: start,
        end: end
      })
        .then(res => {
          if (res.code === 200) {
            console.log('商品券后价历史接口返回', res)
            for (let i = 0; i < res.data.length; i++) {
              var obj = {
                year: moment(res.data[i].create_at).format('YYYY-MM-DD'),
                value: parseFloat(res.data[i].price)
              }
              // console.log(obj)
              this.data2.push(obj)
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 获取某天采集群数据接口
    getbetweendata (start, end) {
      getbetweendata({
        item_id: this.search,
        start: start,
        end: end
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('获取某天采集群数据返回', res)
            this.$nextTick(() => {
              this.spreadList[this.openkey].getlist = res.data.data
            })
            // console.log(this.spreadList[this.openkey])
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    collapsechange (val) {
      // console.log(val)
      this.openkey = val
      if (this.openkey !== undefined) {
        const start = moment(moment(this.spreadList[val].create_at).format('YYYY-MM-DD'))
          .startOf('d')
          .unix()
        const end = moment(this.spreadList[val].create_at)
          .endOf('d')
          .unix()
        this.getbetweendata(start, end)
      }
    },
    // 采集群传播统计记录接口
    getunioninfo (page) {
      getunioninfo({
        goods_id: this.search,
        page: page,
        pagesize: 15
      })
        .then(res => {
          if (res.code === 200) {
            console.log('群传播返回', res)
            // this.$message.success('成功!');
            for (var i in res.data.data) {
              res.data.data[i].getlist = []
            }
            this.spreadList = res.data.data
            // console.log('this.spreadList', this.spreadList)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    Scroll (e) {
      // console.log(this.$refs.evabox.scrollTop)
      const ele = e.srcElement ? e.srcElement : e.target
      // 监听滚动到div底部
      if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 30) {
        // console.log(ele.scrollTop, '+', ele.offsetHeight, '>', ele.scrollHeight - 30)
        this.isloading = 'loading'
        this.loadingtext = '加载中...'
        if (this.flag === false) {
          // 避免多次请求 加锁 该次请求完成 才能再次发起请求
          this.flag = true
          // console.log(this.flag)
          this.num++
          getgoodslist({
            page: this.num,
            pagesize: 15,
            item_id: this.search
            //  start:"",
            //  end:''
          })
            .then(res => {
              if (res.code === 200) {
                // console.log('返回', res.data)
                this.flag = false
                this.page = res.data.page
                this.platformList.push(...res.data.data)
                this.isloading = 'undo'
                this.loadingtext = '加载完成'
                if (parseInt(this.page) > parseInt(res.data.max_page)) {
                  this.isloading = 'redo'
                  this.loadingtext = '没有更多了'
                }
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
        }
      }
    },
    docheck () {
      if (this.search !== '') {
        this.getgoodshistory()
        this.getgoodslist(1)
        this.getunioninfo(1)
        this.gethistoryprice()
        this.gethistorynum()
        this.gettkeasy()
        this.getline('tb', this.tbpcList[0].temp)
        this.getline('p4p_tb', this.tbpcList[0].temp)
        this.getline('h5', this.tbpcList[0].temp)
        this.getline('p4p_h5', this.tbpcList[0].temp)
      } else {
        this.$message.info('请先输入商品id,再检测!')
      }
    },
    // 商品平台在线记录接口
    getgoodslist (page) {
      getgoodslist({
        page: page,
        pagesize: 15,
        item_id: this.search
        //  start:"",
        //  end:''
      })
        .then(res => {
          if (res.code === 200) {
            console.log('在线记录返回', res)
            this.platformList = res.data.data
            this.page = res.data.page
            if (parseInt(this.page) === parseInt(res.data.max_page)) {
              this.isloading = 'redo'
              this.loadingtext = '没有更多了'
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 商品基础信息接口
    getgoodshistory () {
      getgoodshistory({
        item_id: this.search
      })
        .then(res => {
          if (res.code === 200) {
            console.log('商品信息返回', res)
            // this.$message.success('成功!');
            this.goodsinfo = res.data
            this.ischeck = true
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$message.info(err.msg)
        })
    },

    callback1 (val) {
      console.log(val)
      this.getline('tb', val)
    },
    callback2 (val) {
      console.log(val)
      this.getline('p4p_tb', val)
    },
    callback3 (val) {
      console.log(val)
      this.getline('h5', val)
    },
    callback4 (val) {
      console.log('cb4', val)
      this.getline('p4p_h5', val)
    }
  }
}
</script>

<style lang="less" scoped>
.onepage {
  .header_box::v-deep {
    .ant-input {
      border-radius: 4px;
    }

    .ant-btn {
      border-radius: 4px;
      line-height: 32px;
    }
  }

  .goodsinfo {
    .boxinfo {
      color: #101010;
      font-size: 16px;
      text-align: left;

      .infobox {
        line-height: 25px;
      }
    }
  }

  .card_title {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 600;
  }

  .platbox {
    line-height: 23px;
  }

  .collapsebox::v-deep {
    height: 313px;
    overflow-y: auto;
    .ant-collapse-header {
      padding: 3px 0px !important;
    }
  }

  .platbot {
    height: 313px;
    overflow-y: auto;
  }

  .platbot::-webkit-scrollbar {
    width: 0 !important;
  }
  .ranklist {
    height: 270px;
    overflow-y: auto;
  }
  .ranklist::-webkit-scrollbar {
    width: 0 !important;
  }
}
</style>
